<div class="problem-form-container">
  <div class="form-header">
    <h1>{{ isEditMode ? '编辑题目' : '创建新题目' }}</h1>
    <div class="header-actions">
      <button type="button" class="btn btn-secondary" (click)="cancel()">取消</button>
      <button type="submit" class="btn btn-primary" [disabled]="saving" (click)="onSubmit()">
        <span *ngIf="saving">保存中...</span>
        <span *ngIf="!saving">{{ isEditMode ? '更新' : '创建' }}</span>
      </button>
    </div>
  </div>

  <!-- 加载状态 -->
  <div *ngIf="loading" class="loading">
    <div class="spinner"></div>
    <p>正在加载题目信息...</p>
  </div>

  <!-- 错误信息 -->
  <div *ngIf="error" class="error-message">
    <i class="fas fa-exclamation-triangle"></i>
    <p>{{ error }}</p>
  </div>

  <!-- 表单 -->
  <form *ngIf="!loading" [formGroup]="problemForm" class="problem-form">
    <!-- 基本信息 -->
    <div class="form-section">
      <h2>基本信息</h2>
      
      <div class="form-group">
        <label for="title">题目标题 *</label>
        <input 
          type="text" 
          id="title" 
          formControlName="title" 
          class="form-control"
          [class.is-invalid]="getFieldError('title')"
          placeholder="请输入题目标题">
        <div *ngIf="getFieldError('title')" class="invalid-feedback">
          {{ getFieldError('title') }}
        </div>
      </div>

      <div class="form-group">
        <label for="description">题目描述 *</label>
        <textarea 
          id="description" 
          formControlName="description" 
          class="form-control"
          [class.is-invalid]="getFieldError('description')"
          rows="8"
          placeholder="请输入题目描述，支持Markdown格式"></textarea>
        <div *ngIf="getFieldError('description')" class="invalid-feedback">
          {{ getFieldError('description') }}
        </div>
      </div>

      <div class="form-row">
        <div class="form-group">
          <label for="difficulty">难度 *</label>
          <select 
            id="difficulty" 
            formControlName="difficulty" 
            class="form-control"
            [class.is-invalid]="getFieldError('difficulty')">
            <option *ngFor="let diff of difficulties" [value]="diff">{{ diff }}</option>
          </select>
          <div *ngIf="getFieldError('difficulty')" class="invalid-feedback">
            {{ getFieldError('difficulty') }}
          </div>
        </div>

        <div class="form-group">
          <label for="timeLimit">时间限制 (ms) *</label>
          <input 
            type="number" 
            id="timeLimit" 
            formControlName="timeLimit" 
            class="form-control"
            [class.is-invalid]="getFieldError('timeLimit')"
            min="100" 
            max="10000"
            placeholder="1000">
          <div *ngIf="getFieldError('timeLimit')" class="invalid-feedback">
            {{ getFieldError('timeLimit') }}
          </div>
        </div>

        <div class="form-group">
          <label for="memoryLimit">内存限制 (MB) *</label>
          <input 
            type="number" 
            id="memoryLimit" 
            formControlName="memoryLimit" 
            class="form-control"
            [class.is-invalid]="getFieldError('memoryLimit')"
            min="16" 
            max="1024"
            placeholder="128">
          <div *ngIf="getFieldError('memoryLimit')" class="invalid-feedback">
            {{ getFieldError('memoryLimit') }}
          </div>
        </div>
      </div>
    </div>

    <!-- 测试用例 -->
    <div class="form-section">
      <div class="section-header">
        <h2>测试用例</h2>
        <button type="button" class="btn btn-outline-primary" (click)="addTestCase()">
          <i class="fas fa-plus"></i> 添加测试用例
        </button>
      </div>

      <div formArrayName="testCases" class="test-cases">
        <div *ngIf="testCases.length === 0" class="empty-test-cases">
          <p>暂无测试用例</p>
          <button type="button" class="btn btn-primary" (click)="addTestCase()">添加第一个测试用例</button>
        </div>

        <div *ngFor="let testCase of testCases.controls; let i = index" 
             [formGroupName]="i" 
             class="test-case-item">
          <div class="test-case-header">
            <h3>测试用例 {{ i + 1 }}</h3>
            <div class="test-case-actions">
              <label class="checkbox-label">
                <input type="checkbox" formControlName="isSample">
                <span class="checkmark"></span>
                示例用例
              </label>
              <button 
                type="button" 
                class="btn btn-sm btn-outline-danger" 
                (click)="removeTestCase(i)"
                [disabled]="testCases.length <= 1">
                <i class="fas fa-trash"></i>
              </button>
            </div>
          </div>

          <div class="test-case-content">
            <div class="form-group">
              <label>输入 *</label>
              <textarea 
                formControlName="input" 
                class="form-control"
                [class.is-invalid]="getTestCaseError(i, 'input')"
                rows="3"
                placeholder="请输入测试用例的输入数据"></textarea>
              <div *ngIf="getTestCaseError(i, 'input')" class="invalid-feedback">
                {{ getTestCaseError(i, 'input') }}
              </div>
            </div>

            <div class="form-group">
              <label>期望输出 *</label>
              <textarea 
                formControlName="expectedOutput" 
                class="form-control"
                [class.is-invalid]="getTestCaseError(i, 'expectedOutput')"
                rows="3"
                placeholder="请输入期望的输出结果"></textarea>
              <div *ngIf="getTestCaseError(i, 'expectedOutput')" class="invalid-feedback">
                {{ getTestCaseError(i, 'expectedOutput') }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 提交按钮 -->
    <div class="form-actions">
      <button type="button" class="btn btn-secondary" (click)="cancel()">取消</button>
      <button type="submit" class="btn btn-primary" [disabled]="saving || problemForm.invalid" (click)="onSubmit()">
        <span *ngIf="saving">
          <i class="fas fa-spinner fa-spin"></i> 保存中...
        </span>
        <span *ngIf="!saving">
          <i class="fas fa-save"></i> {{ isEditMode ? '更新题目' : '创建题目' }}
        </span>
      </button>
    </div>
  </form>
</div> 